<template>
  <div>
    <nav-btn :sheet-header="xlsxHeader"
             :sheet-list="_list"
             xlsx-name="商品列表"
             @search-method="handleGetSearchActivity"
    />
    <el-table :data="list" max-height="680" show-summary
              style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form class="demo-table-expand" inline label-position="left">
            <el-form-item label="商品名称">
              <el-input v-model="props.row.goodsName"></el-input>
            </el-form-item>
            <el-form-item label="商品库存">
              <el-input v-model="props.row.goodsNumber"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
              <el-input v-model="props.row.goodsPrice" placeholder="商品价格"/>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.goodsDisc }}</span>
            </el-form-item>
            <el-form-item label="商品简图">
              <img
                  :src="props.row.goodsImage"
                  alt="商品图片"
                  class="commodity-img"
                  style="width: 200px"
              />
            </el-form-item>

            <el-form-item label="">
            </el-form-item>
            <el-form-item>
              <el-button
                  v-if="!isChange"
                  type="primary"
                  @click="isChange = !isChange"
              >修改信息
              </el-button>
              <el-button v-else
                         type="danger"
                         @click="handleToUpdateGoodsInfo(props.row)"
              >提交信息
              </el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column v-for="(item ,index ) in settings"
                       :label="item"
                       :prop="index"
                       :key="item"/>
    </el-table>
    <el-pagination
        :current-page="currentPage"
        :page-size="currentPageSize"
        :page-sizes="[10, 50, 100, 500, 1000, 99999]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleGetBySizeActivity"
        @current-change="handleGetByNumActivity"
    />
  </div>
</template>
<script>

import NavBtn from "@/components/navBtn";

export default {
  components: { NavBtn },
  props: {
    type: Number,
  },
  name: "commodityTable",
  data () {
    return {
      list: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      isChange: false,
      modifyForm: {
        name: "",
        price: "",
        disc: "",
        number: "",
      },
      settings: {
        "goodsName": "商品名称",
        "goodsNumber": "商品库存",
        "goodsPrice": "商品价格",
        "goodsDisc": "商品描述",
      },
    };
  },
  mounted () {
    this.handleGetCommodity();
  },
  computed: {

    xlsxSheet () {
      const list = this.list;
      let _list = [];
      _list = list.map(value => {
        console.log(`value-->`, value);
        return {

          "goodsName": value?.goodsName,
          "goodsNumber": value?.goodsNumber,
          "goodsPrice": value?.goodsPrice,
          "goodsDisc": value?.goodsDisc,
        };
      });

      return _list;
    },
    xlsxHeader () {
      const { settings } = this;
      return Object.values(settings);
    },
    _list () {
      const { xlsxSheet } = this;
      let _list = xlsxSheet.map(value => {
        return [Object.values(value)];
      });
      return _list.flat(1);
    },
  },

  methods: {
    // 分页查询全部闲置
    async handleGetCommodity () {
      const { type } = this;
      let method = null;
      console.log(`type-->`, type);
      switch (type) {
        case 0:
          method = this.$http.managerAllgoodsAndGift;
          break;
        case 1:
          method = this.$http.managerAllGoods;
          break;
        case 3:
          method = this.$http.managerAllGift;
          break;
        default:
          method = this.$http.managerAllgoodsAndGift;
          break;
      }
      const res = await method({
        pageNum: this.currentPage,
        pageSize: this.currentPageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    async handleGetBySizeActivity (size) {
      this.currentPageSize = size;
      await this.handleGetCommodity();
    },

    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      this.currentPage = num;
      await this.handleGetCommodity();
    },
    async handleToUpdateGoodsInfo (info) {
      // console.log(info)
      await
          this.$http.goodsModifyGoods(info)
              .then(res => {
                if (res.code) return null;
                this.$message.success("修改成功");
                return this.$router.go(0);
              })
              .catch(e => {
                return this.$message.error("出错啦");
              });
    },

    handleGetSearchActivity (info) {
      let {
        content,
        dataRange,
      } = info;

      return this.searchByBoth(content, dataRange);

    },
    async searchByBoth (content, dataRange) {
      //  后端接口
      const { type } = this;
      let method = null;
      switch (type) {
        case 0:
          method = this.$http.managerAllGoodsBySearch;
          break;
        case 1:
          method = this.$http.managerGetAllGiftBySearch;
          break;
        default:
          method = this.$http.managerAllGoodsBySearch;
          break;
      }

      const res = await method(
          {
            from: dataRange ? dataRange[0] ?? "" : "",
            keywords: content ?? "",
            pageNum: this.currentPage ?? "",
            pageSize: this.currentPageSize ?? "",
            to: dataRange ? dataRange[1] ?? "" : "",
          },
      );
      if (res.code !== 0) return null;
      this.total = res.data.total;
      this.list = res.data.list;

    },
  },
};
</script>

<style lang="less" scoped>
.commodity-img {
  width: 40px;
}

.el-table {
  margin-top: 20px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
